<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>31 字符串、数字、日期排序</title>
	</head>
	<style>
		table {
			border-collapse: collapse;
			margin: 0 20px;
			width: 40%;
			text-align: center;
			float: left;
		}

		td {
			line-height: 1.5;
		}
	</style>

	<body>
		<!-- 方案一 用 localeCompare 比较 -->
		<!-- localeCompare https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare -->

		<!-- 方案二 字符串时用 charCodeAt 转换后比较 -->
		<table border></table>
		<table border></table>
		<button id="btn-name">按姓名排序</button>
		<button id="btn-sex">按性别排序</button>
		<button id="btn-birthday">按出生排序</button>
		<button id="btn-other">按其他排序</button>
		<script>
			var arr = [
				{ name: '貂蝉', sex: '女', birthday: '1999/09/09', other: 'B' },
				{ name: '吕布', sex: '男', birthday: '1996/06/06', other: '等你' },
				{ name: '张飞', sex: '男', birthday: '1990/01/01', other: '10cd' },
				{ name: '李寻欢', sex: '男', birthday: '2005/05/05', other: '5ab' },
				{ name: '妲己', sex: '女', birthday: '2008/08/08', other: '1' },
				{ name: '鲁智深', sex: '男', birthday: '2010/10/10', other: '50' },
				{ name: '唐生', sex: '男', birthday: '2010/10/15', other: '0' },
				{ name: '孙悟空', sex: '男', birthday: '2000/10/10', other: '7' },
				{ name: '白骨精', sex: '女', birthday: '2000/02/02', other: '你好' },
				{ name: '武则天', sex: '女', birthday: '2007/07/07', other: '80' },
			];

			function init(arr1, arr2) {
				const table = document.getElementsByTagName('table');
				table[0].innerHTML = '';
				table[1].innerHTML = '';
				table[0].innerHTML += `
                                <tr>
                                    <th colspan='4'>localeCompare----Intl.Collator</th>
                                </tr>
                                <tr>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>出生</th>
                                    <th>其他</th>
                                </tr>

                                `;
				table[1].innerHTML += `
                                <tr>
                                    <th colspan='4'>charCodeAt</th>
                                </tr>
                                </tr>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>出生</th>
                                    <th>其他</th>
                                </tr>
                                `;

				arr1.forEach(item => {
					table[0].innerHTML += `
                                    <tr>
                                        <td>${item.name}</td>
                                        <td>${item.sex}</td>
                                        <td>${item.birthday}</td>
                                        <td>${item.other}</td>
                                    </tr>
                                    `;
				});
				arr2.forEach(item => {
					table[1].innerHTML += `
                                    <tr>
                                        <td>${item.name}</td>
                                        <td>${item.sex}</td>
                                        <td>${item.birthday}</td>
                                        <td>${item.other}</td>
                                    </tr>
                                    `;
				});
			}

			init(arr, arr);

			// 当比较大量字符串时， 比如比较大量数组时， 最好创建一个Intl.Collator 对象并使用compare (en-US)
			var collator = new Intl.Collator(undefined, { numeric: true });

			document.querySelector('#btn-name').onclick = function () {
				let res1 = [...arr.sort((a, b) => a.name.localeCompare(b.name))];
				let res2 = [...arr.sort((a, b) => a.name.charCodeAt() - b.name.charCodeAt())];
				init(res1, res2);
			};
			document.querySelector('#btn-sex').onclick = function () {
				let res1 = [...arr.sort((a, b) => a.sex.localeCompare(b.sex))];
				let res2 = [...arr.sort((a, b) => a.sex.charCodeAt() - b.sex.charCodeAt())];
				init(res1, res2);
			};

			document.querySelector('#btn-birthday').onclick = function () {
				let res1 = [...arr.sort((a, b) => a.name.localeCompare(b.name))];
				let res2 = [...arr.sort((a, b) => Date.parse(a.birthday) - Date.parse(b.birthday))];

				init(res1, res2);
			};
			document.querySelector('#btn-other').onclick = function () {
				// let res1 = [...arr.sort((a, b) => a.other.localeCompare(b.other, undefined, { numeric: true }))] // numeric 排序规则为数字
				let res1 = [...arr.sort((a, b) => collator.compare(a.other, b.other))];

				// '2'.charCodeAt()==='20'.charCodeAt(),所以字符串数字排序出错
				let res2 = [...arr.sort((a, b) => a.other.charCodeAt() - b.other.charCodeAt())];

				init(res1, res2);
			};
		</script>
	</body>
</html>
